<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
    title: {
      type: String,
      default: "",
    },
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      let placeHolderStyle = {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0,0,0,0)",
          borderWidth: 0,
        },
        emphasis: {
          color: "rgba(0,0,0,0)",
          borderWidth: 0,
        },
      };
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions(chartData) {
      this.chart.setOption({
        title: {
          text: this.title,
          left: "40%",
          top: "35%",
          textAlign: "center",
          textStyle: {
            fontWeight: "normal",
            fontSize: "12",
            fontWeight: "bold",
            color: "#08d580",
            textAlign: "center",
          },
        },
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{a} <br/>{b} : {c} ({d}%)",
        // },
        // legend: {
        //   left: "center",
        //   bottom: "10",
        //   data: ["Industries", "Technology", "Forex", "Gold", "Forecasts"],
        // },
        series: [
          {
            type: "pie",
            hoverAnimation: false, //鼠标经过的特效
            radius: ["85%", "98%"],
            center: ["50%", "50%"],
            startAngle: 225,
            labelLine: {
              normal: {
                show: false,
              },
            },
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                hoverOffset: 1,
                value: chartData.online,
                name: "在岗",
                itemStyle: {
                  // color: "rgba(8, 213, 132, 1)",
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                    [
                      { offset: 0, color: "#08d580" },
                      { offset: 0.5, color: "#00ccf3" },
                      { offset: 1, color: "#08d580" },
                    ]
                  ),
                },
                label: {
                  show: false,
                },
                labelLine: {
                  normal: {
                    smooth: true,
                    lineStyle: {
                      width: 0,
                    },
                  },
                },
                hoverAnimation: false,
              },
              {
                name: "不在岗",
                label: {
                  show: false,
                },
                labelLine: {
                  normal: {
                    smooth: true,
                    lineStyle: {
                      width: 0,
                    },
                  },
                },
                value: chartData.offline,
                hoverAnimation: false,
                itemStyle: {
                  color: "rgba(182, 213, 132, .2)",
                },
              },
            ],
          },
        ],
      });
    },
  },
};
</script>
